<!doctype html>
<html>
	<head>
        <script type="text/javascript" src="../test.js"></script>

		<style>
			body {
				quotes: "<{" "}>" "->" "<-" "(" ")" "-:" ":-";
			}

			.counter1,
			.counter2,
			.quotes1,
			.attr-url {
				border: 1px solid deepskyblue;
				padding: 5px;
				margin-bottom: 10px;			
			}

			.counter1 {
				counter-reset: c1 3;
			}

			.counter1 > div::before {
				content: "«\"" counter(c1) "\»";
				counter-increment: c1 -1;
			}

			.counter2 {
				counter-reset: c2;
			}

			.counter2 > div::before {
				content: "["counters(c2, " < ", upper-roman) ']';
				counter-increment: c2 2;
			}

			.quotes1::before {
				content: open-quote "!" open-quote close-quote open-quote;
			}

			.quotes1::after {
				content: "!" close-quote close-quote;
			}

			.quotes2 {
				quotes: "«" "»" "“" "”";
			}

			.quotes2::before {
				content: open-quote;
			}

			.quotes2::after {
				content: close-quote;
			}

			.attr-url > div::after {
				content: url(../assets/image.jpg) "///" attr(data-text);
			}
		</style>
	</head>
	<body>
		<div class="counter1">
			<div>A</div>
			<div>B</div>
			<div>C</div>
			<div>D</div>
		</div>

		<div class="counter2">
			<div>A</div>
			<div>B</div>
			<div>
				C
				<div class="counter2">
					<div>a</div>
					<div>b</div>
					<div>
						c
						<div class="counter2">
							<div>Aa</div>
							<div>Bb</div>
							<div>Cc</div>
						</div>
					</div>
				</div>
			</div>
			<div>D</div>
		</div>

		<div class="quotes1">
			Hello
			<div class="quotes2">
				Quoted
				<div class="quotes2">World</div>
			</div>
		</div>

		<div class="attr-url">
			<div data-text="Hello World"></div>
		</div>
	</body>
</html>